<template>
	<view class="" :class="{ hidden: filterModalIsShow }">
		<!-- <Title :title="title" /> -->
		<view class="index-container">
			<view :style="{height: statusBarHeight + 'px'}"></view>
			<view :style="{height: '24rpx'}"></view>
			<div class="header">
				<div class="back center" @click="back">
					<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
				</div>
				<!-- <u-search placeholder="请搜索货源信息" :showAction="false" :animation="false" bgColor="#fff" v-model="keyword"
					class="searchSty" @focus="goFilter"></u-search> -->
				<div class="bg-white rounded-50 flex px-30" style="width: 600rpx;height: 78rpx;margin-left: 100rpx;"
					@click="goFilter">
					<image src="/static/icon/search.png" mode="widthFix" class="w-30 mr-16 flex-shrink-0"></image>
					<div class="fz26 text-gray-500"
						v-if="!params.fullBeginAddress && !params.fullEndAddress && (!params.checkedTime || get(params, 'checkedTime.text') == '不限')">
						{{$t('请搜索货源信息')}}</div>
					<div class="flex-1 flex" style="overflow: auto;">
						<div class="bg-gray-300 fz24 h-60 center px-30 rounded-50 text-gray-3d3d3d"
							v-if="params.fullBeginAddress" style="white-space: nowrap;">
							{{ params.fullBeginAddress }}
							<div style="margin-top: -5rpx;"
								@click.stop="params.fullBeginAddress = ''; params.departure_area = ''; getDeliveryList(true); $refs.sourceFilter.fullBeginAddress = ''; $refs.sourceFilter.fullBeginAddressKey = '';">
								<image src="/static/icon/close.png" mode="widthFix" class="w-15 ml-16"></image>
							</div>
						</div>
						<div class="bg-gray-300 fz24 h-60 center px-30 rounded-50 text-gray-3d3d3d  ml-20"
							v-if="params.fullEndAddress" style="white-space: nowrap;">
							{{ params.fullEndAddress }}
							<div style="margin-top: -5rpx;"
								@click.stop="params.fullEndAddress = ''; params.reach_area = ''; getDeliveryList(true); $refs.sourceFilter.fullEndAddress = ''; $refs.sourceFilter.fullEndAddressKey = '';">
								<image src="/static/icon/close.png" mode="widthFix" class="w-15 ml-16"></image>
							</div>
						</div>
						<div class="bg-gray-300 fz24 h-60 center px-30 rounded-50 text-gray-3d3d3d  ml-20"
							v-if="params.checkedTime && get(params, 'checkedTime.text') != '不限'"
							style="white-space: nowrap;">
							{{ get(params, 'checkedTime.text') }}
							<div style="margin-top: -5rpx;"
								@click.stop="params.checkedTime = ''; params.start_time = ''; params.end_time = ''; getDeliveryList(true); $refs.sourceFilter.checkedTime = ''; $refs.sourceFilter.filterList.start_time = ''; $refs.sourceFilter.filterList.end_time = '';">
								<image src="/static/icon/close.png" mode="widthFix" class="w-15 ml-16"></image>
							</div>
						</div>
					</div>

				</div>
			</div>
			<div class="list-title">
				<p v-for="(item, index) in list" :class="{ active: index == current }" @click="sectionChange(index)">
					{{ item }}
				</p>
			</div>
		</view>
		<view >
			<!-- <pre>
				{{ params }}
			</pre> -->
			<view v-for="item in orderInfo">
				<OrderInfo :keyValue="current" :allInfo="item" />
			</view>
			<div class="center mt-50">
				<u-empty v-if="orderInfo.length == 0" textSize="28rpx" iconSize="100rpx" :text="$t('没有更多了')"></u-empty>
			</div>
		</view>
		<Modal :show.sync="filterModalIsShow" :title="$t('货源筛选')">
			<div style="height:80vh;overflow-y:auto">
				<sourceFilter ref="sourceFilter" :modalIsShow.sync="filterModalIsShow" />
			</div>
		</Modal>
		<!-- <u-popup :show="filterModalIsShow">
			<div style="height:90vh;overflow-y:auto" class="flex flex-col">
				<div @click="filterModalIsShow=false" class="closeSty">
					 <u-icon name="close"></u-icon>
				</div>
				<sourceFilter :modalIsShow.sync="filterModalIsShow" class="mt-30" />
			</div>
		</u-popup> -->

	</view>
</template>

<script>
import Modal from "../publish/components/Modal.vue"
import sourceFilter from "./sourceFilter.vue"
import OrderInfo from './components/orderInfo.vue'
import {
	getDeliverySize,
	getDeliveryRecord,
	getDeliverySelect
} from '@/api/order.js'
import Title from './components/title.vue'
export default {
	components: {
		OrderInfo,
		Title,
		sourceFilter,
		Modal
	},
	data() {
		return {
			filterModalIsShow: false,
			statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
			params: {
				user_id: uni.getStorageSync("user_id"),
				page: 1,
				// 0不限  1运输  2报关  3转关  4清关   5仓储  6装卸
				demand: "",
				// 出发城市 id
				departure_area: "",
				// 结束时间
				end_time: "",
				// 0大件货物   1小件货物
				goods_type: "",
				// 货物类型关键词
				keyword: "",
				// 最大体积
				max_volume: "",
				// 最大重量
				max_weight: "",
				// 最小体积
				min_volume: "",
				// 最小重量
				min_weight: "",
				// 到达城市 id
				reach_area: "",
				// 0公共的   1私有的
				release_type: "",
				// 0、不限，  1、今日，  2、三日内，   3、七日内
				search_time: "",
				// 尺寸 id
				size_id: "",
				// 开始时间
				start_time: "",
				// 1整车  2散货
				transport_type: "",
				// 0不限  1其他 2汽运 3空运 4海运 5铁路
				transport_way: "",
				// 载具 id
				vehicle_id: ""
			},
			title: this.$t('货源信息'),
			keyword: '',
			list: [this.$t('公共资源'), this.$t('定向货源')],
			current: 0,
			orderInfo: [],
			filterList: [],
			nomore: false,
			filterParams: {}
		}
	},
	// created() {
	// 	console.log('908888')
	// 	uni.$on("getDeliveryList", (filterList) => {
	// 		this.params = Object.assign(this.params, filterList)
	// 		this.getDeliveryList(true)
	// 	})
	// },     
	onLoad(options) {

		uni.$on("getDeliveryList", (filterList) => {
			this.params = Object.assign(this.params, filterList)
			this.getDeliveryList(true)
		})
		if (options?.item) {
			this.filterParams = JSON.parse(options.item)


			this.params = Object.assign(this.params, this.filterParams)
			this.getDeliveryList(true)
		} else {
			this.paramsInit()
			this.getDeliveryList(true)
		}
	},
	// 每一次页面展示都会走这个方法
	// onShow() {
	// 	console.log('909009090')
	// 	// 把筛选的值放到缓存里
	// 	if (uni.getStorageSync("filterList")) {
	// 		console.log('9000000---====')
	// 		this.params = Object.assign(this.params, uni.getStorageSync("filterList"))
	// 		this.getDeliveryList(true)
	// 		// 拿到之后要清除缓存
	// 		uni.removeStorageSync("filterList")
	// 	} else if(!this.filterParams) {
	// 		this.paramsInit()
	// 		this.getDeliveryList()
	// 	}
	// },
	//下拉刷新
	onPullDownRefresh() {
		this.getDeliveryList(true)
	},
	//上拉加载
	onReachBottom() {
		this.params.page++
		this.getDeliveryList()
	},
	mounted() {
		// this.getDeliveryList()
		if (this.filterParams.fullBeginAddress) this.$refs.sourceFilter.fullBeginAddress = this.filterParams.fullBeginAddress;
		if (this.filterParams.departure_area) this.$refs.sourceFilter.fullBeginAddressKey = this.filterParams.departure_area;
		if (this.filterParams.fullEndAddress) this.$refs.sourceFilter.fullEndAddress = this.filterParams.fullEndAddress;
		if (this.filterParams.reach_area) this.$refs.sourceFilter.fullEndAddressKey = this.filterParams.reach_area;

	},
	methods: {
		paramsInit() {
			this.params = {
				// 用户 id
				user_id: uni.getStorageSync("user_id"),
				page: 1,
				// 0不限  1运输  2报关  3转关  4清关   5仓储  6装卸
				demand: "",
				// 出发城市 id
				departure_area: "",
				// 结束时间
				end_time: "",
				// 0大件货物   1小件货物
				goods_type: "",
				// 货物类型关键词
				keyword: "",
				// 最大体积
				max_volume: "",
				// 最大重量
				max_weight: "",
				// 最小体积
				min_volume: "",
				// 最小重量
				min_weight: "",
				// 到达城市 id
				reach_area: "",
				// 0公共的   1私有的
				release_type: "",
				// 0、不限，  1、今日，  2、三日内，   3、七日内
				search_time: "",
				// 尺寸 id
				size_id: "",
				// 开始时间
				start_time: "",
				// 1整车  2散货
				transport_type: "",
				// 0不限  1其他 2汽运 3空运 4海运 5铁路
				transport_way: "",
				// 载具 id
				vehicle_id: ""
			}
		},
		getDeliveryList(init) {
			// 每一次初始化的时候，数据都要重置
			if (init) {
				this.params.page = 1
				this.nomore = false;
			}
			getDeliverySelect(this.params).then(res => {
				console.log('res', res)
				if (res.data.code == 200) {
					if (this.params.page == 1) {
						this.orderInfo = res.data.data.data || []
					} else {
						this.orderInfo = [...this.orderInfo, ...res.data.data.data]
					}
					//{{$t('当前')}}请求的{{$t('列表')}}{{$t('是')}}空的 那就{{$t('是')}}{{$t('没有更多了')}}
					if (this.get(res, 'data.data.data').length == 0) {
						this.nomore = true;
					}
				}
				// this.slog(res)
				// 结束下拉刷新
				uni.stopPullDownRefresh()
			})
		},
		back() {
			this.cback()
			// uni.navigateTo({	
			// 	url: '/pages/index/index'
			// })
			// console.log(uni.webView.navigateBack());	
			// uni.webView.postMessage({
			// 	data: {
			// 		action: 'back',
			// 	}
			// });
		},
		sectionChange(index) {
			this.current = index
			this.params.release_type = index;
			this.getDeliveryList(true)
		},
		goFilter() {
			uni.stopPullDownRefresh()
			this.filterModalIsShow = true
			// uni.navigateTo({
			// 	url: "/pages/sourceInformation/sourceFilter"
			// })
		},
		getInfo(item) {
			uni.navigateTo({
				url: `/pages/sourceInformation/sourceDeatil?id=${item.id}`
			})
		}
	}
}
</script>

<style lang="less">
.hidden {
	overflow: hidden;
	height: 100vh;
}

.closeSty {
	position: absolute;
	right: 40rpx;
	top: 25rpx;
}

page {
	background-color: #F6F7FB;
}

.index-container {
	width: 100%;
	background: #F6F7FB url("/static/bg/backcolorImg.png") no-repeat top / 100%;
	position: sticky;
	z-index: 60;
	top: 0;
}

.header {
	width: 100%;
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);

	.searchSty {
		width: 95%;
		height: 78rpx;
		margin-left: 34rpx;

		/deep/ .u-search__content {
			height: 100%;
			margin-left: 68rpx;
			margin-top: 24rpx;
		}

		/deep/ .u-search__content__input--placeholder {
			color: #8C8C8C;
			font-family: "PingFang SC";
			font-size: 26rpx;
			font-style: normal;
			font-weight: 400;
			margin-left: 13rpx;
		}

		/deep/ .u-icon__icon {
			font-size: 40rpx !important;
			margin-top: 6rpx;
		}
	}
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 0rpx;
}

.list-title {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	padding-left: 0;
	padding-top: 10rpx;
	padding-bottom: 20rpx;

	p {
		height: 46rpx;
		font-size: 28rpx;
		color: #535353;
		margin-left: 40rpx;
	}

	p:last-child {
		margin-left: 58rpx;
	}

	.active {
		font-size: 28rpx;
		color: #278AFF;
		font-weight: 600;
		border-bottom: 4rpx solid #278AFF;
	}
}
</style>